<template>
	<view :data-theme="theme">
		<view class="map-window">
			<view class="map">
				<map id="myMap" style="width: 100%; height: 100%;" 
				:latitude="latitude" 
				:longitude="longitude"
				:markers="markers" ></map>
			</view>
			<view class="list">
				<view class="search">
					<view class='input acea-row row-between-wrapper'>
						<input type='text' placeholder='请输入搜索关键字' placeholder-class='placeholder' @input="onSearchInput"></input>
						<text class='iconfont icon-sousuo2' @click="getPoiList"></text>
					</view>
				</view>
				<scroll-view scroll-y="true" @scrolltolower="getPoiMoreList" style="height: 55vh;">
					<view class="item" v-for="(item,index) in addressList" :key="index" @click="clickItem(item)">
						<view>{{item.title}}</view>
						<view class="tip">{{item.address}}</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	let app = getApp();
	import {mapAddressPoi} from '@/api/public.js'
	export default {
		data() {
			return {
				theme: app.globalData.theme,
				addressList: [],
				markers: [],
				searchValue: '',
				mapCtx: '',
				pageNo: 1,
				pageSize: 10,
				latitude: '',
				longitude: '',
				address: '',
				pre: '',	//选择标识：mapAddress：地址管理详细地址；settled：开户申请地址选择；update：店铺管理；upgrade：申请变更
			};
		},
		onLoad(option) {
			let that = this;
			that.pre = option.pre;
			
			if(option.lat){
				that.latitude = option.lat;
				that.longitude = option.lon;
			}
			
			that.getLocationInfo();
		},
		methods: {
			onSearchInput(e) {
			  this.searchValue = e.target.value;
			},
			getLocationInfo() {
				let that = this;
				if(that.searchValue){
					uni.getLocation({
					    type: 'gcj02', // 坐标系类型
					    success: function (res) {
							//记录经纬度
					        that.latitude = res.latitude; 	//维度
					        that.longitude = res.longitude; 	//经度
							//设置地图中心点
							uni.createMapContext().moveToLocation({
							  longitude: res.longitude,
							  latitude: res.latitude,
							});
							//添加标记
							that.markers = [{
									id: 0,
									iconPath: "../images/address.png",
									longitude: res.longitude,
									latitude: res.latitude,
									width: 40,
									height: 40
								}];
							that.getPoiList();
					    },
					    fail: function (res) {
					        console.log('获取定位失败：' + res.errMsg);
					    }
					});
				}
			},
			getPoiList: function() {
			  var that = this
			  that.pageNo = 1;
			  
			  let where = {
				  keyword: that.searchValue==''?'店':that.searchValue,
				  location: ''+that.latitude+','+that.longitude+'',
				  page_size: that.pageSize,
				  page_index: that.pageNo,
			  };
			  // 调用接口
			  mapAddressPoi(where).then(res =>{
				  let dataAdd = res.data;
				  if(dataAdd.status==0){
					  that.addressList = dataAdd.data;
				  }else{
					  uni.showToast({
						title: '查询错误'+dataAdd.status
					  })
				  }
			  });
			},
			getPoiMoreList: function() {
			  var that = this
			  that.pageNo ++;
			  
			  let where = {
				  keyword: that.searchValue==''?'店':that.searchValue,
				  location: ''+that.latitude+','+that.longitude+'',
				  page_size: that.pageSize,
				  page_index: that.pageNo,
			  };
			  // 调用接口
			  mapAddressPoi(where).then(res =>{
				  let dataAdd = res.data;
				  if(dataAdd.status==0){
					  that.addressList = dataAdd.data;
				  }else{
					  uni.showToast({
					  	title: '查询错误'+dataAdd.status
					  })
				  }
			  });
			},
			clickItem: function(item) {
			  if(this.pre!=''){
				  uni.$emit(this.pre, item);
			  }
			  wx.navigateBack({
				   delta: 1,
			  })
			},
		}
	}
</script>

<style scoped lang="scss">
	.map-window {
		background-color: #fff;
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
	
	.map{
		width: 100%;
		height: 40vh;
	}
	
	.search {
		background-color: #fff;
		margin: 10px;
		border-radius: 50px;
		padding: 5px 10px;
		color: #777;
		border: 1px #e6e6e6 solid;
	}
	
	.list{
		
		.item{
			margin: 10px;
			border-bottom: 1px #eeeeee solid;
			
			.tip{
				color: #999;
				font-size: 11px;
				margin-top: 4px;
				margin-bottom: 5px;
			}
		}
	}
</style>
